<template>
    <div class="menu-item-wrapper">
        <template v-for="(item, index) in menuData">
            <!-- v-if="item.children?.length" -->
            <el-sub-menu
                v-if="item.children?.length && !item.meta?.hideMenu"
                :key="item.path"
                :index="item.path"
            >
                <template #title>
                    <span
                        class="icon-box"
                        :class="'icon-box-level-' + item.meta?.level"
                    >
                        <el-icon class="menu-icon" v-if="item.meta?.icon">
                            <component
                                :is="filterIcon(item.meta?.icon)"
                            ></component>
                        </el-icon>
                    </span>
                    <span class="menu-label">{{ item.meta?.title }}</span>
                </template>
                <menu-item
                    :menu-data="item.children"
                    @clickItem="clickMenu"
                ></menu-item>
            </el-sub-menu>

            <el-menu-item
                v-else
                :key="item.path + index"
                :index="item.path"
                @click="clickMenu(item)"
            >
                <span
                    class="icon-box"
                    :class="'icon-box-level-' + item.meta?.level"
                >
                    <el-icon class="menu-icon" v-if="item.meta?.icon">
                        <component
                            :is="filterIcon(item.meta?.icon)"
                        ></component>
                    </el-icon>
                </span>
                <span class="menu-label">{{ item.meta?.title }}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script lang="ts" setup name="menuItem">
import { ref, defineProps } from "vue";
import { User, Message, Service } from "@element-plus/icons-vue";

const props = defineProps({
    menuData: {
        type: Array,
        default: () => [],
    },
});
const emit = defineEmits(["clickItem"]);
const iconList = [
    {
        type: "user",
        icon: User,
    },
    {
        type: "message",
        icon: Message,
    },
    {
        type: "service",
        icon: Service,
    },
];
const filterIcon = (icon: string) => {
    const target = iconList.find((i) => icon == i.type);
    if (target) {
        return target.icon;
    }
    // return User;
};
const clickMenu = (item: any) => {
    console.log(item);
    emit("clickItem", item);
};
</script>

<style lang="scss" scoped>
.icon-box {
    transform: translateY(-1px);
}
.icon-box-level-1 {
}
.icon-box-level-2 {
    padding-left: 10px;
}
.icon-box-level-3 {
    padding-left: 5px;
}
</style>
